<script setup lang="ts">
import {Delete, Edit} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {getHouseData} from "../../api/mock";
import {ref} from "vue";
import {useUserInfoStore} from "../../stores/userInfo";

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
const tableData = ref([])
const form = ref(null)
const dialogFormVisible = ref(false)
const titleName = ref('')
const userInfoStore = useUserInfoStore();
const formLabelWidth = '140px'
const imageUrl = ref('')
// 商品添加、编辑表单数据模型
const formData = ref({
  garden: '',
  campus: '',
  buildNum:'',
  roomNum: '',
  bedNum:'',
})
const formParams = ref({
  garden: '',
})

// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
  pageSize.value = val
  getHouseList()
}
// 当当前页面发生变化，会调用
const handleCurrentChange = (val) => {
  pageNum.value = val
  getHouseList()
}
const getHouseList = ()=>{
  const params = {
    pageNum : pageNum.value,
    pageSize: pageSize.value,
    ...formParams.value,
  }
  getHouseData(params).then(res=>{
    if (res.status) {
      tableData.value = res.data.tableData
      total.value = res.data.total
    }
  })
}
getHouseList()
const resetParams = ()  =>{
  formParams.value = {
    garden: '',
  }
  getHouseList()
}
const addGoods= ()  =>{
  form.value.validate(valid=>{
    if (valid) {
      // insertGoods(formData.value).then(res=>{
      //   if (res.status) {
      //     getHouseList()
      //     dialogFormVisible.value = false
      //     ElMessage.success("添加成功")
      //   }
      // })
    }
  })
}
const editGoods = () =>{
  // updateGoods().then(res=>{
  //   if (res.status) {
  //     getHouseList()
  //     dialogFormVisible.value = false
  //     ElMessage.success("修改成功")
  //   }
  // })
}
const  showAddDialog = (title)=>{
  // 清空表单
  titleName.value = title
  resetFormData()
  dialogFormVisible.value = true
}
const resetFormData = ()=>{
  formData.value = {
    garden: '',
    campus: '',
    buildNum:'',
    roomNum: '',
    bedNum:'',
  }
}
// 表单校验
const rules = {
  name: [
    {required: true, message: '请输入队伍名称', trigger: 'blur'},
    {min: 5, max: 16, message: '长度为5-16位', trigger: 'blur'},
  ],
  school: [
    {required: true, message: '请输入学校名称', trigger: 'blur'},
  ],
  captain: [
    {required: true, message: '请输入队长名字', trigger: 'blur'},
  ],
  time: [
    {required: true, message: '请选择时间', trigger: 'change'},
  ],
  number: [
    {required: true, message: '请输入团队人数', trigger: 'blur'},
  ],
  // picture: [
  //   {required: true, message: '请上传图片', trigger: 'change'},
  // ],
  tel:[
    {required: true, message: '请输入联系方式', trigger: 'clur'},
  ]
}
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>母校行队伍管理</span>
        <div class="extra">
          <el-button type="primary" @click="showAddDialog('添加队伍')">添加商品</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline  :model="formParams">
      <el-form-item label="队伍名称：">
        <el-input v-model="formParams.garden" placeholder="请输入队伍名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getHouseList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 商品列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="队伍名称"  prop="name"></el-table-column>
      <el-table-column label="学校名称" prop="school"></el-table-column>
      <el-table-column label="队长名字" prop="captain"></el-table-column>
      <el-table-column label="母校行批次" prop="lot" show-overflow-tooltip></el-table-column>
      <el-table-column label="学院" prop="college"></el-table-column>
      <el-table-column label="团队人数" prop="number"></el-table-column>
      <el-table-column label="联系方式" prop="way"></el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>

  <el-drawer v-model="dialogFormVisible" direction="rtl">
    <template #header>
      <h4>{{titleName}}</h4>
    </template>
    <template #default>
      <el-form ref="form" :model="formData"  label-position="top" :rules="rules">
        <el-form-item label="队伍名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" autocomplete="off" placeholder="请输入团队名" />
        </el-form-item>
        <el-form-item label="学校名称" :label-width="formLabelWidth" prop="price">
          <el-input v-model="formData.price" autocomplete="off" placeholder="请输入学校" />
        </el-form-item>
        <el-form-item label="申请时间：" prop="pubdate" :label-width="formLabelWidth">
          <el-date-picker
              v-model="formData.pubdate"
              type="date"
              placeholder="请选择时间"
              size="default"
              value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="学院：" prop="flag" :label-width="formLabelWidth">
          <el-input v-model="formData.price" autocomplete="off" placeholder="请输入学院" />
        </el-form-item>
        <el-form-item label="团队人数：" :label-width="formLabelWidth" prop="intro">
          <el-input type="textarea" v-model="formData.intro" autocomplete="off" placeholder="请输入人数(不得超过100人)" />
        </el-form-item>
        <el-form-item label="联系方式：" :label-width="formLabelWidth" prop="intro">
          <el-input type="textarea" v-model="formData.intro" autocomplete="off" placeholder="请输入联系方式" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="dialogFormVisible =false">取消</el-button>
        <el-button type="primary" @click="titleName==='添加申请'?addGoods():editGoods()">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
